<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=gbk"/>
    <meta http-equiv="X-UA-Compatible" content="IE=8"/>
    <title>Add child todo item</title>
    <link rel="stylesheet" href="../style/default.css"/>
</head>

<body>
<div class="title">
    <h1>Add child todo item</h1>
  <span class="nav">
  <a href="0.index.html">Top</a>
  <a href="3.add_more_todo.html">Previous</a>
  <a href="5.delete_todo.html">Next</a>
  </span>
</div>
<div class="body">
    <p></p>
    <ol>
        <li>
            Click the "Add as child" button in the toolbar
            <div>
                <img src="image/add_as_child.png" alt=""/>
            </div>
        </li>
        <li>
            A new row is added below the originally selected todo (todo2), and indented as a child item
            <div><img src="image/child_added.png" alt=""/></div>
        </li>
        <li>
            After setting title and description
            <div><img src="image/child_edited.png" alt=""/></div>
        </li>
        <li>Now the current item is todo2.1; click the Add button again will add another todo
            on the same level.</li>
        <li>
            After adding a few more
            <div><img src="image/many_child.png" alt=""/></div>
        </li>
    </ol>
</div>
</body>
</html>
